<template>
  <div class="container">
    <x-header @on-click-back="toback" :left-options="{preventGoBack:true}" title="有房出租"></x-header>
    <div class="form-wrap">
      <div class="input-item flex-row flex-y-center">
        <label><span class="red">*</span> 小区名称：</label><input v-model="formData.houseName" class="flex-grow-1"
                                                              type="text">
      </div>
      <div class="input-item flex-row flex-y-center">
        <label>门牌号码：</label><input v-model="formData.houseNumber" class="flex-grow-1" type="text">
      </div>

      <div class="input-item flex-row flex-y-center">
        <label>房屋户型：</label><input v-model="shi" class="roomCount" type="text"> 室 <input v-model="ting"
                                                                                         class="roomCount roomCount2"
                                                                                         type="text"> 厅
      </div>

      <div class="input-item flex-row flex-y-center">
        <label>房屋面积：</label><input v-model="formData.houseArea" class="commen" type="text"><span>平米</span>
      </div>

      <div style="height: 1rem" class="input-item  flex-row flex-y-center">
        <label>装修状况：</label>
        <div class="" style="width:4rem;padding:.1rem 0">
          <span class="rspace "><input id="radio1" value="毛坯" v-model="formData.zhuangXiuStatus" name="radioId"
                                       type="radio"
                                       class="radio"><label for="radio1">毛坯</label></span>
          <span class="rspace "><input id="radio2" value="简装" v-model="formData.zhuangXiuStatus" name="radioId"
                                       type="radio"
                                       class="radio"><label for="radio2">简装</label></span>
          <span class="rspace "><input id="radio3" value="中等" v-model="formData.zhuangXiuStatus" name="radioId"
                                       type="radio"
                                       class="radio"><label for="radio3">中等</label></span>
          <span class="rspace rspace2"><input id="radio4" value="精装" v-model="formData.zhuangXiuStatus" name="radioId"
                                              type="radio"
                                              class="radio"><label for="radio4">精装</label></span>
          <span class="rspace rspace2"><input id="radio5" value="豪装" v-model="formData.zhuangXiuStatus" name="radioId"
                                              type="radio"
                                              class="radio"><label for="radio5">豪装</label></span>
        </div>
      </div>

      <div class="input-item flex-row flex-y-center">
        <label><span class="red">*</span> 出租价格：</label><input v-model="formData.houseToLetPrice" class="commen"
                                                              type="text"><span>元/月</span>
      </div>
      <div class="input-item flex-row flex-y-center">
        <label>您的姓名：</label><input v-model="formData.userName" class="flex-grow-1" type="text">
      </div>
      <div class="input-item flex-row flex-y-center">
        <label><span class="red">*</span> 您的电话：</label><input v-model="formData.phoneNumber" class="flex-grow-1"
                                                              type="text">
      </div>
      <div class="textArea flex-row flex-y-center">
        <label>备注说明：</label><textarea v-model="formData.description" class="flex-grow-1"></textarea>
      </div>
    </div>
    <button @click="submitBtn" class="submitBtn">提交</button>
  </div>
</template>
<script>
  import {URI_HOUSETOLET} from 'src/const/shareUri'

  import {XHeader} from 'vux'

  export default {
    name: "HouseToLet",
    components: {XHeader},
    data() {
      return {
        shi: '',
        ting: '',
        formData: {
          houseName: '',
          houseNumber: '',
          huxing: '',
          houseArea: '',
          zhuangXiuStatus: '毛坯',
          houseToLetPrice: '',
          userName: '',
          phoneNumber: '',
          description: ''
        }
      }
    },
    methods: {
      toback() {
        let url = cdnBase + '/index.html';
        window.location.href = url
      },
      submitBtn() {
        this.formData.huxing = this.shi + '室' + this.ting + '厅';
        if (!this.formData.houseName) {
          this.$vux.toast.text('请输入小区名称！');
          return false;
        }

        if (!this.formData.houseToLetPrice) {
          this.$vux.toast.text('请输入出租价格');
          return false;
        }

        var phoneRule = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
        if (!phoneRule.test(this.formData.phoneNumber)) {
          this.$vux.toast.text('手机号不正确！');
          return false;
        }

        this.$ajax.post(URI_HOUSETOLET, {
          formData: this.formData
        }, res => {
          this.$vux.alert.show({
            content: '在线委托成功，经纪人稍后和您联系！',
            onShow() {

            },
            onHide() {
              let url = cdnBase + '/index.html';
              window.location.href = url;
            }
          })
        });
      }
    },
  }
</script>

<style lang="less" scoped>

  @import "./commen";

</style>